<template>
  <div class="user_body">
    <div  class="resumes_info">
      <div class="resumes_photo">
        <el-upload
          class="avatar-uploader"
          :action="uploadaction"
          :show-file-list="false"
          :headers="myHeaders"
          :accept="uploadaccept"
          :auto-upload="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="userInfoForm.userPhoto !== '' && userInfoForm.userPhoto !== null && userInfoForm.userPhoto !== undefined" :src="userInfoForm.userPhotoShow" class="avatar">
          <img v-if="userInfoForm.userPhoto === '' || userInfoForm.userPhoto === null || userInfoForm.userPhoto === undefined" src="../../../public/defimg.jpg" height="256" width="256">
          <span>图片.png/.jpg，2M以内

OCR智能识别，输入更快捷</span>
        </el-upload>
        <el-dialog title="上传头像" :visible.sync="dialogVisible" append-to-body>
          <div class="cropper-content">
            <input type="button" class="imgEditBotton" value="+" title="放大" @click="changeScale(1)">
            <input type="button" class="imgEditBotton" value="-" title="缩小" @click="changeScale(-1)">
            <input type="button" class="imgEditBotton" value="↺" title="左旋转" @click="rotateLeft">
            <input type="button" class="imgEditBotton" value="↻" title="右旋转" @click="rotateRight">
            <div class="cropper" style="text-align:center">
              <vueCropper
                ref="cropper"
                :img="option.img"
                :output-size="option.outputSize"
                :output-type="option.outputType"
                :info="option.info"
                :can-scale="option.canScale"
                :auto-crop="option.autoCrop"
                :auto-crop-width="option.autoCropWidth"
                :auto-crop-height="option.autoCropHeight"
                :fixed="option.fixed"
                :fixed-box="option.fixedBox"
                :fixed-number="option.fixedNumber"
              />
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" :loading="loading" @click="finish">确认</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="resumes_detail">
       <el-form ref="userInfoForm" :model="userInfoForm" :rules="userInfoRules" label-width="150px" style="width: 100%">
        <el-row>
          <el-col :span="12">
            <el-form-item label="承兑行名称" prop="userName">
              <el-input v-model="userInfoForm.userName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="票面金额" prop="userSex">
              <el-input v-model="userInfoForm.userSex" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
                    <el-col :span="12">
            <el-form-item label="票号" prop="userMail">
              <el-input v-model="userInfoForm.userMail" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汇票到期日" prop="userBirth" required>
              <el-date-picker
                v-model="userInfoForm.userBirth"
                type="date"
                placeholder="汇票到期日"
              />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="验证码" prop="userMobile">
              <el-input v-model="userInfoForm.userMobile" />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="text-align: center">
          <el-button @click="resetUserInfoEditForm('userInfoForm')">重置询价</el-button>
          <el-button type="primary" @click="submitUserInfoEditForm('userInfoForm')">开始询价</el-button>
          </el-col>
        </el-row>
        <el-form-item>

        </el-form-item>
      </el-form>
      </div>
    </div>
  </div>
</template>

<script>

import { getList, isOpenRes, del, addResume } from '@/api/resume'
import { saveInfo, getInfo, uploadImg } from '@/api/userinfo'
import { VueCropper } from 'vue-cropper'
export default {
  name: 'billQuery',
  components: {
    VueCropper
  },
  data() {
    const validateEmail = (rule, value, callback) => {
      // const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      const regEmail = /^[a-z0-9]+([._\\-]*[a-z0-9])+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (value.length < 1) {
        callback(new Error('请输入邮箱'))
      } else if (!regEmail.test(value)) {
        callback(new Error('请输入正确邮箱'))
      } else {
        callback()
      }
    }
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      // 裁剪组件的基础配置option
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: 'jpeg', // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 250, // 默认生成截图框宽度
        autoCropHeight: 350, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: false, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        canMove: true
      },
      resIsOpen: 'true',
      showInfoEdit: false,
      uploadaction: process.env.VUE_APP_BASE_API + '/user/file/upload/img',
      myHeaders: { 'user-auth': localStorage.getItem('token') },
      uploadaccept: '.jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP',
      userInfoForm: {
        id: '',
        userName: '',
        userSex: '',
        userMail: '',
        userPlace: '',
        userMobile: '',
        userBirth: '',
        userPhoto: '',
        isOpen: 'true'
      },
      userInfoRules: {
        userName: [
          { required: true, message: '承兑行名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        userSex: [
          { required: true, message: '票面金额', trigger: 'blur' }
        ],
        userBirth: [
          { required: true, message: '汇票到期日', trigger: 'blur' }
        ],
        userMobile: [
          { required: true, message: '请至输入验证码', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      loading: false,
      fileinfo: {},
      channelList: ''
    }
  },
  created() {
    const that = this
    // that.getUserInfo()
    // getList().then(response => {
    //   that.channelList = response.data
    // })
  },
  methods: {
    format(percentage) {
      return `简历完善度${percentage}%`
    },
    userInfoEditShowOn() {
      const that = this
      that.showInfoEdit = true
    },
    submitUserInfoEditForm(formName) {
      this.$refs[formName].validate((valid) => {
        const that = this
        if (valid) {
          // const userInfoJson = JSON.stringify(that.userInfoForm)
          // console.log(userInfoJson)
          saveInfo(that.userInfoForm).then(response => {
            if (response.result === 1) {
              that.getUserInfo()
              that.showInfoEdit = false
            }
          })
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    submitImg(formName) {
      const that = this
      saveInfo(that.userInfoForm).then(response => {
        if (response.result === 1) {
          that.getUserInfo()
          that.showInfoEdit = false
        }
      })
    },
    resetUserInfoEditForm(formName) {
      const that = this
      that.showInfoEdit = false
      that.$refs[formName].resetFields()
    },
    getUserInfo() {
      const that = this
      getInfo().then(response => {
        if (response.result === 1) {
          // console.log(response)
          that.userInfoForm = response.data
          that.userInfoForm.userPhotoShow = process.env.VUE_APP_BASE_API + response.data.userPhoto
          that.resIsOpen = response.data.isOpen
          // that.userInfoForm.userName = response.data.userName
          // that.userInfoForm.userSex = response.data.userSex
          // that.userInfoForm.userMail = response.data.userMail
          // that.userInfoForm.userPlace = response.data.userPlace
          // that.userInfoForm.userMobile = response.data.userMobile
          // that.userInfoForm.userBirth = response.data.userBirth
          // that.userInfoForm.userPhoto = response.data.userPhoto
          // if (response.data.isOpen === 'true') { that.userInfoForm.isOpen = true }
          // if (response.data.isOpen === 'false') { that.userInfoForm.isOpen = false }
        }
      })
    },
    beforeAvatarUpload() {},
    handleAvatarSuccess(response, file, fileList) {
      // file.url = response.data.fileUrl
      const that = this
      this.$nextTick(() => {
        if (response.result === 1) {
          that.option.img = URL.createObjectURL(file.raw)
          that.fileinfo = response
          that.dialogVisible = true
        }
      })
    },
    // 放大/缩小
    changeScale(num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    // 坐旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft()
    },
    // 右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight()
    },
    finish() {
      const that = this
      that.$refs.cropper.getCropBlob((data) => {
        const newFile = new window.File([data], that.fileinfo.data.fileName, { type: that.fileinfo.type })
        const formData = new FormData()
        //  添加图片
        formData.append('file', newFile)
        uploadImg(formData).then(response => {
          if (response.result === 1) {
            that.userInfoForm.userPhoto = response.data.fileUrl
            that.userInfoForm.userPhotoShow = process.env.VUE_APP_BASE_API + response.data.fileUrl
            // console.log(this.userInfoForm.userPhoto)
            that.dialogVisible = false
            that.submitImg(that.userInfoForm)
          }
        })
      })
    },
    resumeIsOpen() {
      const that = this
      const senddata = { id: that.userInfoForm.id, isOpen: that.resIsOpen }
      isOpenRes(senddata).then(response => {
        if (response.result === 1) {
          // console.log(response)
          that.$message({
            message: '变更成功',
            type: 'success'
          })
        }
      })
    },
    onAddResume() {
      const that = this
      const senddata = { id: that.userInfoForm.id }
      addResume(senddata).then(response => {
        if (response.result === 1) {
          that.$router.push({ path: '/resumeedit', query: { id: response.data.id }})
        }
      })
    },
    onClickDel(resumeId, i) {
      const that = this
      const senddata = { id: resumeId }
      that.$confirm('简历将永久删除, 确认删除?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(senddata).then(response => {
          if (response.result === 1) {
            that.channelList.splice(i, 1)
          }
        })
      }).catch(() => {
      })
    }

  }
}
</script>

<style >
.user_body{
  margin: 15px 5%;
  background-color: #ffffff;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.resumes_info{
    display: flex;
    padding: 30px 24px;
    background: #f7f8fa;
    border: 1px solid rgba(0,0,0,.1);
}
.resumes_info .el-date-editor.el-input{
  width: 100% !important;
}
.resumes_photo{
    position: relative;
    width: 280px;
    height: 165px;
    margin-right: 16px;
    border: 1px solid rgba(0,0,0,.1);
    cursor: pointer;
  }
.resumes_photo img{
    height: 144px;
}
.resumes_photo span{
     display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    background: #ffb337;
    text-align: center;
   }
  .resumes_username{
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin-top: 4px;
  }
  .resumes_username button{
    float: right;
    color: #409EFF;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    font-size: 14px;
  }
  .resumes_detail{
    width: 100%;
  }
  .resumes_extra_info{
    margin-top: 8px;
    font-size: 14px;
    margin-bottom: 12px;
    flex: 1 1;
    color: #666;
  }
  .resumes_contact{
    margin: 0px !important;
    line-height: 30px;
    box-sizing: border-box;
    display: block;
    flex: 1 1;
    color: #666;
    font-size: 14px;
  }
  .resumes_tips{
        margin-top: 14px;
    font-size: 12px;
    color: #999;
  }
  .resumes_tips .resumes_tips_star{
    color: #ff9037;
    font-size: 14px;
  }
  .resume_list{
    color: #222;
  }
  .resume_list .resume_li:hover{
    background-color: #f6fafd;
  }
  .resume_list h3{
    padding: 0 24px;
    height: 62px;
    line-height: 62px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
  .empty_resume{
    float: right;
    margin-top: -62px;
    margin-right: 40px;
  }
  .resume_li{
    margin: 5px;
    argin-bottom: 10px;
    position: relative;
    padding: 24px;
    border: 1px solid rgba(0,0,0,.1);
    transition: background .12s ease;
  }
  .resume_li_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .resume_li_title span{
    position: relative;
    height: 25px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    line-height: 25px;
    white-space: nowrap;
  }
  .resumes_progress{
    width: 300px;
  }
  .resumes_progress p{
    font-size: 12px;
    font-weight: 400;
    color: #999;
  }
  .resumes_progress  .el-progress__text{
    margin: 12px 208px 0px 0px;
    float: right;
     font-size: 12px;
    font-weight: 400;
    color: #999;
  }
  .resume_datetime{
    position: absolute;
    bottom: 24px;
    right: 24px;
    font-size: 12px;
    color: #999;
  }
  .resumes_btns{
    white-space: nowrap;
    position: relative;
  }
  .resumes_btns .el-button{
    font-size: 14px;
    vertical-align: middle;
    color: #20a0ff;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    font-size: 20px;
    vertical-align: middle;
    padding: 4px 5px !important;
  }
  .resumes_btns .el-button:hover{
    border-color: transparent;
    background-color: transparent;

  }
  .resumes_btns span{
    font-size: 16px;
    color: rgb(153, 153, 153);
    vertical-align: middle;
    margin-left: 8px !important;
  }
  .cropper-content{
    width:500px;height:500px;
    margin: auto;
  }
  .cropper{
    height:480px;
    width: 500px;
    margin: auto;
  }
button{
  cursor: pointer;
}
  .imgEditBotton{
    white-space: nowrap;
    cursor: pointer;
    border-radius: 2px;
    border: #409eff 1px solid;
    background-color: #419eff;
    color: #ffffff;
    height: 30px;
    width: 45px;
    font-size: 20px;
    margin: 3px 5px;
  }
 .user_body .el-dialog__body{
    background-color: #ececec;
  }
  .bank-logo-box .bank-logo {
    max-width: 115px;
    max-height: 68px;
    display: block;
    margin: auto;
}
.text-right {
    text-align: right;
}
</style>
